<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
    <script src="/admin/js/token.js"></script>
</head>
<body style="background: white; height: 100%">

        <div class="layui-inline">
            <label class="layui-form-label">开始时间：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test1" placeholder="年-月-日 时:分:秒">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">结束时间：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test2" placeholder="年-月-日 时:分:秒">
            </div>
        </div>

        <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search" id="btnSearch">搜索</button>
        </div>


       <!--<div class="layui-card-body">-->
           <table class="layui-hide"  id="table" lay-filter="test-table-operate"></table>
       <!--</div>-->

</body>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <span>终端密钥列表</span>
    </div>
</script>
<script>
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test1',
            type: 'datetime'
        });
    });
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test2',
            type: 'datetime'
        });
    });
    //数据表格
        var $ = layui.$;
        var table = layui.table
        var s = layui.data("s");
        table.render({
            elem:'#table',
            id:'tt',
            toolbar:'#toolbarDemo',
            url:'/admin/terminal-key/findByTimeORFindALL',
            cols:[
                [{
                    field:'terminal_key_id',
                    title:'ID',
                    width:'14%',
                    sort: true,
                    align:'center'
                },{
                    field:'terminal_key_begin_time',
                    title:'开始时间',
                    width:'33%',
                    align:'center'
                },{
                    field:'terminal_key_end_time',
                    title:'结束时间',
                    width:'33%',
                    align:'center'
                },{
                    field:'terminal_key_total_time',
                    title:'使用时间',
                    width:'20%',
                    align:'center'
                }
                ]
            ],
            page:false,
            where:{
                terminal_id:s.terminal.terminal_id
            }
        });
        //搜索事件
        $("#btnSearch").click(function(){
            table.reload('tt',{
                where:{
                    terminal_key_begin_time:$("#test1").val(),
                    terminal_key_end_time:$("#test2").val()
                },
                page:{
                    curr:1
                }
            });
        });

</script>
</html>